<template>
  <div id="app">
	<div class="title">签到</div>
	<el-tabs type="card" value="sign">
		<el-tab-pane label="签到记录" name="sign">
			<el-table :data="tableData" border style="margin-top:20px;" v-loading="loading">
				<el-table-column prop="id" label="ID" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column prop="user_info" label="用户" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<div class="userHead" @click="goUserDetail(scope.row.user_info.user_id)">
							<img :src="scope.row.user_info.avatar" class="square" />
							{{scope.row.user_info.user_name}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="签到时间" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{scope.row.time_created | dateFormat}}</template>
				</el-table-column>
				<el-table-column prop="delta_int" label="获得积分" :show-overflow-tooltip="true"></el-table-column>
			</el-table>
			<div class="paginationBlock">
				<el-pagination @current-change="changePage" layout="prev, pager, next, total" :total="count" :current-page="page" :page-size="pageSize" hide-on-single-page></el-pagination>
			</div>
		</el-tab-pane>
		<el-tab-pane label="基本规则" name="rule" class="sign_rules">
			<el-form label-position="top" v-loading="loading">
				<el-form-item label="默认赠送积分">
					<el-input v-model.trim="score_value"></el-input>
				</el-form-item>
				<el-form-item label="规则">
					<div class="editor" id="editor" ref="editor"></div>
				</el-form-item>
			</el-form>
			<el-button @click="onSave" type="primary">立即保存</el-button>
		</el-tab-pane>
	</el-tabs>
  </div>
</template>

<script>
import E from "wangeditor";
import fetch from '@/api/axios';
import {sysToYuan} from '@/utils/transPrice';
import {tsToDateFormat} from '@/utils/tsToDateFormat';
export default {
	data() {
		return {
			handleShow:false,
			loading: false,
			page: 1,
			pageSize: 10,
			count: 0,
			tableData: [],

			score_value: '',
			rule_value: '',
			editor:null,
		};
	},
	filters: {
		transPrice(p){
			return sysToYuan(p, 2);
		},
		dateFormat(t){
			return tsToDateFormat(t, 'yyyy-MM-dd hh:mm');
		},
	},
	created(){
		this.getList();
	},
	methods: {
		goUserDetail(uid){
			this.$router.push('/user/detail/'+uid);
		},
		getList(){
			let _this = this;
			this.loading = true;
			fetch.get('/api/console/user/signin/log',{
				page: _this.page,
				pagesize: _this.pageSize,
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					_this.count = data.data.count;
					_this.pageSize = data.data.pagesize;
					_this.tableData = [...data.data.result];
				}else{
					_this.$message.error(data.message);
				}
			}).catch((err)=>{
				_this.$message.error(err.message);
			}).finally(()=>{
				_this.loading = false;
			});
		},
		getRule(){
			fetch.get('/api/console/user/signin/log',{
				get_sys_config: true,
			}).then((res)=>{
				let data = res.data;
				if(data.code == 0){
					this.score_value = data.data.userSingInScore;
					this.rule_value = data.data.userSingInRule;
					this.editor.txt.html(this.rule_value);
				}else{
					this.$message.error(data.message);
				}
			}).catch((err)=>{
				this.$message.error(err.message);
			});
		},
		changePage(page){
			this.page = page;
			this.getList();
		},
		onSave(){
			let _this = this;
			this.loading = true;
			fetch.post('/api/console/user/signin/log', {
				score_value: this.score_value,
				rule_value: this.editor.txt.html()
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					this.$message.success('保存成功');
				}else{
					this.$message.error(data.data.info);
				}
			}).catch(err=>{
				this.$message.error('网络连接失败，请稍后重试');
			}).finally(()=>{
				this.loading = false;
			});
		},
	},
	mounted() {
		let _this = this;
		if(!_this.editor){
			_this.editor = new E("#editor");
			_this.editor.customConfig.menus = ["bold","fontSize","fontName",'italic',"underline",'strikeThrough',"foreColor","backColor","link","justify",'quote',"image",'video',"code"];
			_this.editor.create();
		}
		this.getRule();
	}
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
  font-size: 21px;
  margin-top: 65px;
}
.sign_rules{
	width:730px;
}
#editor{
	margin-top:20px;
	margin-bottom:40px;
	height:300px;
}
</style>